import React, { Component } from 'react'
import axios from 'axios'

import './Detail.scss'

export default class Detail extends Component {
  state = {
    headerInfo: [],
    recommendInfo: []
  }
  componentDidMount() {

    // console.log(this.props.match.params.performanceId);
    let {performanceId} = this.props.match.params
    axios.get(`https://show.maoyan.com/maoyansh/myshow/ajax/v2/performance/${performanceId}?sellChannel=13&cityId=1&lng=0&lat=0`)
      .then(res => {
        this.setState({
          headerInfo: res.data.data
        })
        // console.log(res);
      }).catch(error => { console.log(error); })

    axios.get(`https://show.maoyan.com/maoyansh/myshow/ajax/performance/recommends/${performanceId}?sellChannel=13&cityId=1&lng=0&lat=0`)
      .then(res => {
        this.setState({
          recommendInfo: res.data.data
        })
        // console.log(res.data.data);
      }).catch(error => { console.log(error); })
  }
  render() {
    return (
      <div className='detail'>
        {/* 基本信息开始 */}
        <div className="detail-basic">
          {/* 头部开始 */}
          <div className="detail-header">
            <div className="detail-header-left">
              <img src={this.state.headerInfo.posterUrl} alt="" />
            </div>

            <div className="detail-header-right">
              <div className="detail-header-right-text">{this.state.headerInfo.name}</div>
              <div className="detail-header-right-info">
                <span>80-100元</span>
                <span>座位图 </span>
              </div>
            </div>
          </div>
          {/* 头部结束 */}

          {/* 地址开始 */}
          <div className="detail-address">
            <div className="venue_container">
              <div className="date">
                <span>{this.state.headerInfo.showTimeRange}</span>

              </div>
              <div className="address_container">
                <span>{this.state.headerInfo.cityName}</span>
                <span>{this.state.headerInfo.shopName}</span>

              </div>
            </div>
            <div className="travel_guide">
              <i></i>
            </div>
          </div>
          {/* 地址结束 */}

          {/* 票务信息开始 */}

          <div className="service_titles">
            <div className="service_title_item">
              <i className='iconfont icon-icon-test'></i>
              <span>官方票</span>
            </div>
            <div className="service_title_item">
              <i className='iconfont icon-zuowei'></i>
              <span>可选座</span>
            </div>
            <div className="service_title_item">
              <i className='iconfont icon-youjian'></i>
              <span>电子票</span>
            </div>

          </div>
          {/* 票务信息结束 */}

          {/* 操作功能开始 */}

          <div className="detail_buttons">
            <div className="detail_button">
              <i className='iconfont icon-shoucang'></i>
              <span>收藏</span>
            </div>
            <div className="detail_button share_button">
              <i className='iconfont icon-iconfontzhizuobiaozhun20'></i>
              <span>收藏</span>
            </div>
          </div>
          {/* 操作功能结束 */}


        </div>

        {/* 基本信息结束 */}

        {/* 演出详情开始 */}
        <div className="detail__block ">
          <div className="detail_title">
            <div>演出详情</div>
          </div>

          <div className='detail__content'
            dangerouslySetInnerHTML={{ __html: this.state.headerInfo.detail }}
          ></div>
        </div>
        {/* 演出详情结束 */}

        {/* 购票须知开始 */}
        <div className="detail-content">
          <div className="detail_title">
            <div>购票须知</div>
          </div>
          <div className="detail_content"
            dangerouslySetInnerHTML={{ __html: this.state.headerInfo.ticketNotes }}
          >

          </div>
        </div>
        {/* 购票须知结束 */}

        {/* 为你推荐开始 */}
        <div className="detail_recommend">
          <div className="detail_title">
            <div>为你推荐</div>
          </div>
          <div className="detail_recommend_items">
            {
              this.state.recommendInfo.map(v => {
                return (
                  <div className="detail" key={v.performanceId}>
                    <div className="detail-left">
                      <img src={v.posterUrl} alt="" />
                    </div>
                    <div className="item-content">
                      <div className="title">{v.name}</div>
                      <div className="date">{v.showTimeRange}</div>
                      <div className="place">
                        <span>{v.cityName}</span>
                        <span>{v.shopName}</span>
                      </div>
                      <div className="price">
                        <div className="state">
                          <span className="state-left">售票中</span>
                          <span>{v.priceRange}元</span>
                        </div>
                        <div className="nature">自营</div>
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>

        </div>
        {/* 为你推荐结束 */}


        {/* 选座购票开始 */}
        <div className="bottom-button">
          <div className="button">
            <span>选座购票</span>
          </div>
        </div>
        {/* 选座购票结束 */}
      </div>
    )
  }
}
